<!DOCTYPE html>
<html>
	<head>
		<link rel="stylesheet"  href="http://code.jquery.com/mobile/1.0rc1/jquery.mobile-1.0rc1.min.css" />
		<script type="text/javascript" src="jquery-1.7.min.js"></script>
		<script type="text/javascript" src="jquery.mobile-1.0rc2.min.js"></script>
		<script type="text/javascript" src="jquery.json-2.3.min.js"></script>
		<script type="text/javascript">
			var jsontxt = window.localStorage.getItem(window.sessionStorage.user_id+"_updates");
			var updates = JSON.parse(jsontxt);
			var separated_updates = new Object();
			
			function update(title,top_menu,back,add,back_f,add_f)
			{
				$("#adddiv").hide();
				$("#header > h1").html(title);
				if(back)
				{
					$("#back > span > .ui-btn-text").html(back);
					$("#back").show();
					$("#back").unbind();
					$("#back").click(back_f);
				}
				else
				{
					$("#back").hide();
				}
				if(add)
				{
					$("#add > span > .ui-btn-text").html(add);
					$("#add").show();
					$("#add").unbind();
					$("#add").click(add_f);
				}
				else
				{
					$("#add").hide();
				}
				if(top_menu)
				{
					$("#top_menu_courses").show();
				}
				else
				{
					$("#top_menu_courses").hide();
				}
				$("#courselist").html('');
				add_hide();
			}
			function page_documents()
			{
				window.sessionStorage.page = "documents";
				$.getJSON("get/course/documents?course_id="+window.sessionStorage.course_id,
				{
					format: "json"
				},
				function(data)
				{
					update(data.coursename+": Documents",true);
					
					$("#courselist").append('<li data-role="fieldcontain"><label for="email">E-mailaddress:</label><input type="text" name="email" id="email" value=""/><button type="submit" onclick="submit_email()" data-theme="d">Add collection to Google Docs</button></li>');
					$.each(data.results,function(i,item)
					{
						$("#courselist").append('<li class="ui-li-has-thumb"><a href="'+item.href+'"><img class="ui-li-thumb" src="images/'+item.type+'.png" /><h1>'+item.filename+'</h1><p class="ui-li-aside">'+item.last_modified+'</p></a></li>');
					});
					$('#courselist').listview('refresh');
				});
			}
			function page_updates()
			{
				window.sessionStorage.page = "updates";
				update("Updates");
				
				$.each(updates,function(i,item)
				{
					if(item.type=="comment")
						$("#courselist").append('<li class="ui-li-has-thumb"><a onclick="window.sessionStorage.entry_id=\''+item.reply_to_id+'\';window.sessionStorage.course_id=\''+item.course_id+'\';page_comments()"><img class="ui-li-thumb" src="'+item.pic_url+'" />'+item.fullname+' posted: '+item.text+' ('+item.coursename+')</a></li>');
					else
						$("#courselist").append('<li class="ui-li-has-thumb"><a onclick="window.sessionStorage.course_id=\''+item.course_id+'\';page_entries()"><img class="ui-li-thumb" src="'+item.pic_url+'" />'+item.fullname+' posted: '+item.text+' ('+item.coursename+')</a></li>');
				});
				$('#courselist').listview('refresh');
				$('#footer').show();
			}
			function save_updates()
			{
				//window.localStorage.setItem(user_id+"_updates",JSON.stringify(temp));
				//alert(JSON.stringify(updates));
				$("#updates_counter").html(updates.length);
				$("#courses_counter").html(updates.length);
			}
			function is_update(id,course_id)
			{
				if(separated_updates[course_id]==null)
					return false;
				found = false;
				for(i=0;i<separated_updates[course_id].length;i++)
				{
					item = separated_updates[course_id][i];
					if(item.entry_id==id||item.reply_to_id==id)
					{
						if(item.entry_id==id)
						{
							temp = separated_updates[course_id].splice(i,1);
							
							for(j=0;j<updates.length;j++)
							{
								item2 = updates[j];
								if(item2.entry_id==id)
									updates.splice(j,1);
							}
						}
						found = true;
						return true;
					}
				}
				return found;
			}
			function init()
			{
				$("#updates_counter").html(updates.length);
				$("#courses_counter").html(updates.length);
				$.each(updates,function(i,item)
				{
					if(separated_updates[item.course_id]==null)
					{
						separated_updates[item.course_id] = new Array();
					}
					separated_updates[item.course_id].push(item);
				});
				
				switch(window.sessionStorage.page)
				{
					case "courses":
						page_courses();
						break;
					case "entries":
						page_entries();
						break;
					case "updates":
						page_updates();
						break;
					case "comments":
						page_comments();
						break;
					case "documents":
						page_documents();
						break;
					default:
						page_courses();
						break;
				}
				
			}
			var show_entries = false;
			function add_entry()
			{
				show_entries = !show_entries;
				if(show_entries)
				{
					add_show();
				}
				else
				{
					add_hide();
				}
			}
			function add_hide()
			{
				show_entries = false;
				$("#adddiv").hide();
				$("#add > .ui-btn-inner > .ui-icon").removeClass("ui-icon-arrow-u");
				$("#add > .ui-btn-inner > .ui-icon").addClass("ui-icon-arrow-d");
			}
			function add_show()
			{
				show_entries = true;
				$("#adddiv").show();
				$("#add > .ui-btn-inner > .ui-icon").removeClass("ui-icon-arrow-d");
				$("#add > .ui-btn-inner > .ui-icon").addClass("ui-icon-arrow-u");
			}
			function page_courses()
			{
				window.sessionStorage.page = "courses";
				update("Courses");
				$.getJSON("get/user/courses?user_id="+window.sessionStorage.user_id,
				{
					format: "json"
				},
				function(data)
				{
					$.each(data.results,function(i,item)
					{
						if(separated_updates[item.course_id]==undefined)
							$("#courselist").append('<li><a onclick="window.sessionStorage.course_id=\''+item.course_id+'\';page_entries()">'+item.coursename+'</a></li>');
						else
							$("#courselist").append('<li style="background:#D99"><a onclick="window.sessionStorage.course_id=\''+item.course_id+'\';page_entries()">'+item.coursename+'<span class="ui-li-count">'+separated_updates[item.course_id].length+'</span></a></li>');
					});
					$('#courselist').listview('refresh');
				});
			}
			function page_entries()
			{
				window.sessionStorage.page = "entries";
				
				$.getJSON("get/course/entries?course_id="+window.sessionStorage.course_id,
				{
					format: "json"
				},
				function(data)
				{
					update("Courses: "+data.coursename+" (#"+data.hashtag+")",true,"Courses","Add entry",function(){page_courses()},function(){add_entry()});
					
					$.each(data.results,function(i,item)
					{
						if(is_update(item.entry_id,window.sessionStorage.course_id))
						{
							$("#courselist").prepend('<li style="background:#D99" class="ui-li-has-thumb"><a onclick="window.sessionStorage.entry_id=\''+item.entry_id+'\';page_comments()" href="#"><img class="ui-li-thumb" src="'+item.pic_url+'" /><h1>'+item.fullname+'</h1><p>'+item.text+' ('+item.num_replies+')</p><p class="ui-li-aside">'+item.date+'</p></a></li>');
						}
						else
						{
							$("#courselist").append('<li class="ui-li-has-thumb"><a onclick="window.sessionStorage.entry_id=\''+item.entry_id+'\';page_comments()" href="#"><img class="ui-li-thumb" src="'+item.pic_url+'" /><h1>'+item.fullname+'</h1><p>'+item.text+' ('+item.num_replies+')</p><p class="ui-li-aside">'+item.date+'</p></a></li>');
						}
					});
					$('#courselist').listview('refresh');
					save_updates();
				});
			}
			function submit_email()
			{
				$.post("/add_email",
				{
					text:$("#email").val(),course_id:window.sessionStorage.course_id
				},
				function(item)
				{
					$("#email").val('')
				},"json");
			}
			function submit_form()
			{
				add_hide();
				
				switch(window.sessionStorage.page)
				{
					case "comments":
						$.post("/add_comment",
						{
							text:$("#message").val(),reply_to_id:window.sessionStorage.entry_id,user_id:window.sessionStorage.user_id,course_id:window.sessionStorage.course_id
						},
						function(item)
						{
							$("#courselist").append('<li class="ui-li-has-thumb"><img class="ui-li-thumb" src="'+item.pic_url+'" /><h1>'+item.fullname+'</h1><p>'+item.text+'</p><p class="ui-li-aside">'+item.date+'</p></li>');
							$('#courselist').listview('refresh');
							$("#message").val('')
						},"json");
						break;
						break;
					case "entries":
						$.post("/add_entry",
						{
							text:$("#message").val(),user_id:window.sessionStorage.user_id,course_id:window.sessionStorage.course_id
						},
						function(item)
						{
							$("#courselist").prepend('<li class="ui-li-has-thumb"><a onclick="window.sessionStorage.entry_id=\''+item.entry_id+'\';page_comments()" href="#"><img class="ui-li-thumb" src="'+item.pic_url+'" /><h1>'+item.fullname+'</h1><p>'+item.text+' ('+item.num_replies+')</p><p class="ui-li-aside">'+item.date+'</p></a></li>');
							$('#courselist').listview('refresh');
							$("#message").val('')
						},"json");
						break;
				}
			}
			function page_comments()
			{
				window.sessionStorage.page = "comments";
				$.getJSON("get/entry/comments?entry_id="+window.sessionStorage.entry_id,
				{
					format: "json"
				},
				function(data)
				{
					update("Courses: "+data.coursename+" (comments)",true,data.coursename,"Add comment",function(){page_entries()},function(){add_entry()});
					
					$("#courselist").append('<li class="ui-li-has-thumb"><img class="ui-li-thumb" src="'+data.pic_url+'" /><h1>'+data.fullname+'</h1><p>'+data.text+'</p><p class="ui-li-aside">'+data.date+'</p></li>');
					$.each(data.results,function(i,item)
					{
						if(is_update(item.entry_id,window.sessionStorage.course_id))
						{
							$("#courselist").append('<li style="background:#D99" class="ui-li-has-thumb"><img class="ui-li-thumb" src="'+item.pic_url+'" /><h1>'+item.fullname+'</h1><p>'+item.text+'</p><p class="ui-li-aside">'+item.date+'</p></li>');
						}
						else
						{
							$("#courselist").append('<li class="ui-li-has-thumb"><img class="ui-li-thumb" src="'+item.pic_url+'" /><h1>'+item.fullname+'</h1><p>'+item.text+'</p><p class="ui-li-aside">'+item.date+'</p></li>');
						}
					});
					$('#courselist').listview('refresh');
				});
			}
		</script>
	</head>
	<body onload="init()">
		<div data-role="page" id="all">
			<div data-role="footer" id="top_menu_courses" data-position="fixed">
				<div data-role="navbar">
					<ul>
						<li>
							<a onclick="page_entries()" class="ui-btn-active">
								Stream
							</a>
						</li>
						<li>
							<a onclick="page_documents()">
								Docs
							</a>
						</li>
					</ul>
				</div>
			</div>
			<div data-role="header" id="header" data-position="fixed">
				<a id="back" data-icon="arrow-l">Go back</a>
				<h1>Courses</h1>
				<div align="center" id="adddiv" data-role="fieldcontain">
							<textarea cols="40" rows="8" name="textarea" id="message"></textarea>
							<br/><button type="submit" onclick="submit_form()" data-theme="b" name="submit" value="submit-value">Submit</button>
				</div>
				<a id="add" data-icon="arrow-d">Add</a>
				
			</div>
			<div data-role="content" id="content">
				<ul data-role="listview" id="courselist">
				</ul>
			</div>
			<div data-role="footer" id="footer" data-position="fixed">
				<div data-role="navbar">
					<ul>
						<li>
							<a onclick="page_courses()" href="#" class="ui-btn-active">
								Courses
								<span class="ui-li-count" id="courses_counter"></span>
							</a>
						</li>
						<li>
							<a onclick="page_updates()" href="#">
								Updates
								<span class="ui-li-count" id="updates_counter"></span>
							</a>
						</li>
						<li>
							<a href="b.html">
								Messages
							</a>
						</li>
						<li>
							<a href="b.html">
								Calendar
							</a>
						</li>
					</ul>
				</div>
			</div>
		</div>
	</body>
</html>